<template>
	<up-tabbar  :border="false" :placeholder="placeholder" :safeAreaInsetBottom="false" :value="index"
		activeColor="#333333" :inactiveColor="infoColor">
		<up-tabbar-item :name="1" text="宠物" @click="pushs">
			<template #active-icon>
				<image src="/static/images/tabbar/ld_1.png" style="width: 52rpx; height: 52rpx;" />
			</template>
			<template #inactive-icon>
				<image src="/static/images/tabbar/ld.png" style="width: 52rpx; height: 52rpx;" />
			</template>
		</up-tabbar-item>
		<up-tabbar-item :name="2" text="定位" @click="pushs">
			<template #active-icon>
				<image src="/static/images/tabbar/dw_1.png" style="width: 52rpx; height: 52rpx;" />
			</template>
			<template #inactive-icon>
				<image src="/static/images/tabbar/dw.png" style="width: 52rpx; height: 52rpx;" />
			</template>
		</up-tabbar-item>

		<up-tabbar-item :name="3" text="信息" :badge="imStore.total" @click="pushs">
			<template #active-icon>
				<image src="/static/images/tabbar/xx_1.png" style="width: 52rpx; height: 52rpx;" />
			</template>
			<template #inactive-icon>
				<image src="/static/images/tabbar/xx.png" style="width: 52rpx; height: 52rpx;" />
			</template>
		</up-tabbar-item>

		<up-tabbar-item :name="4" text="我的" @click="pushs">
			<template #active-icon>
				<image src="/static/images/tabbar/user_1.png" style="width: 52rpx; height: 52rpx;" />
			</template>
			<template #inactive-icon>
				<image src="/static/images/tabbar/user.png" style="width: 52rpx; height: 52rpx;" />
			</template>
		</up-tabbar-item>
	</up-tabbar>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import useTabBerStore from '@/store/modules/tabBar';
import useUserStore from '@/store/modules/user';
import { toast, showConfirm, tansParams } from '@/utils/common';
import useImStore from '@/store/modules/im';
const imStore = useImStore();
const props = defineProps({
	placeholder: {
		type: Boolean,
		default: true
	}
});
const tabStore = useTabBerStore();
const index = ref(tabStore.index);
const list = ref(['/pages/index', '/pages/map', '/pages/message', '/pages/user']);
const push = async (i) => {
	uni.switchTab({
		url: list.value[i - 1]
	});
};
const pushs = (i) => {
	tabStore.setIndex(i);
	push(i);
};
onMounted(() => { });
onShow(() => {
	const pages = getCurrentPages(); // 获取当前页面栈
	const currentPage = pages[pages.length - 1]; // 当前页面
	const currentPath = currentPage.route; // 当前页面路径
	const i = list.value.findIndex((item) => item == `/${currentPath}`) + 1;
	tabStore.setIndex(i);
	index.value = i;
});
</script>

<style lang="scss">
 .u-tabbar__content {
	padding-top: 22rpx !important;
	padding-bottom: 22rpx !important;
	border-top-left-radius: 20px !important;
	border-top-right-radius: 20rpx !important;
}

.u-tabbar--fixed {
	padding-top: 22rpx !important;
	padding-bottom: 42rpx !important;
	border-top-left-radius: 25px !important;
	border-top-right-radius: 25px !important;
}
</style>
<style lang="scss" scoped></style>

